<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'/>
        <link rel="shortcut icon" href="images/logo W.jpg" />
        <title>Work to Worker</title>
        <style>
            a:link {text-decoration:none;}
            #menudiv2:hover{background-color: #FF6600;color: #1A3665}
        </style>        
        <style type="text/css">
            @font-face {
                font-family: "jokerman";
                src: url('font/VIVALDII.TTF') format("truetype");
            }              
        </style>
        <style type="text/css">
            @media screen and (-webkit-min-device-pixel-ratio:0)
            { #test { margin-top: 10px } }
            @media screen and (-webkit-min-device-pixel-ratio:0)
            { #test1 { margin-top: 10px } }
        </style>
        <script src="js/jquery-1.9.1.js"/>
        <script type="text/javascript">
            $(function() {
                $(".jobtitle > a > span").each(function(i) {
                    len = $(this).text().length;
                    if (len > 28)
                    {
                        $(this).text($(this).text().substr(0, 28) + '...');
                    }
                });
            });
            $(function() {
                $(".namecate").each(function(i) {
                    len = $(this).text().length;
                    if (len > 22)
                    {
                        $(this).text($(this).text().substr(0, 22) + '...');
                    }
                });
            });
            $(function() {
                $(".namelocation").each(function(i) {
                    len = $(this).text().length;
                    if (len > 22)
                    {
                        $(this).text($(this).text().substr(0, 22) + '...');
                    }
                });
            });
        </script>
        <script type="text/javascript">
            $(function() {
                $(".namecty").each(function(i) {
                    len = $(this).text().length;
                    if (len > 28)
                    {
                        $(this).text($(this).text().substr(0, 28) + '...');
                    }
                });
            });
        </script>
    </h:head>
    <h:body style="background-color: #1A3665">
          
        <f:view locale="#{languageBean.locale}">
            <div style="width: 1000px;margin: auto;background-color: white;border-radius: 10px;-moz-border-radius: 10px">
                <div style="">
                    <ui:include src="headertemplate.xhtml" />
                </div>
                <div style="background-color: white;height: auto;">
                    <ul style="margin-top: 50px;">
                        <li style="display: inline-block;margin-left: 50px">
                            <img src="images/PhotoShare.png" width="120" height="160" alt="Untitled-5"/>
                        </li>
                        <li style="display: inline-block;vertical-align: top">
                            <ul id="test1">
                                <li style="list-style: none;font-size: 40px;color: #1A3665;">
                                    <h:outputText value="#{msg['global.You_can_search_for_your_opportunity']}" />
                                </li>
                            </ul>
                            <ul id="test" style="margin-top: 20px">                            
                                <li style="list-style: none; margin-top: 5px;">
                                    <h:form>
                                        <ul>
                                            <li style="display: inline">
                                                <h:selectOneMenu value="#{comboboxSearchBean.location}"  >
                                                    <f:selectItem itemLabel="#{msg['global.location']}" itemValue="#{-1}"/> 
                                                    <f:selectItems value="#{comboboxSearchBean.locations}" var="loca"	itemLabel="#{loca.name}" itemValue="#{loca.id}" />
                                                </h:selectOneMenu>  
                                            </li>
                                            <li style="display: inline;margin-left: 27px">
                                                <h:selectOneMenu value="#{comboboxSearchBean.category}" >
                                                    <f:selectItem itemLabel="#{msg['global.category']}" itemValue="#{-1}" /> 
                                                    <f:selectItems value="#{comboboxSearchBean.categorys}" var="cate"	itemLabel="#{cate.categoryName}" itemValue="#{cate.id}" />
                                                </h:selectOneMenu>  
                                            </li>
                                            <li style="display: inline;margin-left: 27px">
                                                <h:selectOneMenu value="#{comboboxSearchBean.loveljob}"  >
                                                    <f:selectItem itemLabel="#{msg['global.joblevel']}" itemValue="#{-1}" /> 
                                                    <f:selectItems value="#{comboboxSearchBean.loveljobs}" var="level"	itemLabel="#{level.name}" itemValue="#{level.id}" />
                                                </h:selectOneMenu>  
                                            </li>
                                            <li style="display: inline;margin-left: 30px">
                                                <h:commandButton  type="submit" value="#{msg['global.search']}" action="searchJobResult" style="border-style: none;font-weight: bold;background-color: #1A3665;color: white;height: 30px;width:100px" >
                                                    <f:param name="idct" value='${comboboxSearchBean.category}'/>
                                                    <f:param name="idlj" value='${comboboxSearchBean.loveljob}'/>
                                                    <f:param name="idlc" value='${comboboxSearchBean.location}'/>
                                                </h:commandButton>
                                            </li>
                                        </ul>
                                    </h:form>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <ul style="width: 700px;;margin-left: 100px;margin-top: 30px;">
                        <li style="list-style: none;background-color: #00C2F3;color: white;font-weight: bold;padding: 5px 0px 5px 30px;font-size: 20px;border-radius: 10px;-moz-border-radius: 10px">
                            New Job
                        </li>
                        <li style="list-style: none;margin-top: 10px;width: 650px;margin-left: 14px">
                            <ui:repeat value="#{topTenJobBean.list}" var="tt">
                                <ul class="jobsubject" style="width: 670px; margin-top: 5px; border: 1px;border-style: solid;border-radius: 10px;-moz-border-radius: 10px;padding: 5px 0px 5px 0px">
                                    <li style="display: inline-block;vertical-align: top; width: 320px;">
                                        <ul>
                                            <li style="list-style: none;font-sight: bold;font-size: 110%;color: #FF6600">
                                                <div class="jobtitle">
                                                    <a href="customerProfilePreview.xhtml?idJobDetail=#{tt.id}" style="color: #FF6600;">
                                                        <span><h:outputText value="#{tt.title}"/> </span>
                                                    </a>
                                                </div>
                                            </li>

                                            <li style="list-style: none;font-size: 90%">
                                                <div class="namecty">#{tt.namecustomer}</div>
                                            </li>
                                        </ul>
                                    </li>
                                    <li style="display: inline-block;vertical-align: top;width: 170px; margin-left: -10px;">
                                        <ul>
                                            <li style="list-style: none;font-size: 90%;margin-top: 3px; width: 160px;">
                                                <div class="namecate">#{tt.namecate}</div>
                                            </li>
                                            <li style="list-style: none;font-size: 90%;margin-top: 3px; width: 160px;">
                                                <div class="namelocation">#{tt.namelocation}</div>
                                            </li>
                                        </ul>
                                    </li>
                                    <li style="display: inline-block;vertical-align: top">
                                        <ul>
                                            <li style="list-style: none;font-size: 90%;margin-top: 3px">
                                                #{tt.nameleveljob}
                                            </li>
                                            <li style="list-style: none;font-size: 90%;margin-top: 3px">
                                                #{tt.typejob}
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </ui:repeat>
                        </li>
                    </ul>
                    <br/>
                    <br/>
                </div>
            </div>
            <div style="color: white; height: 100px;border-radius: 10px;-moz-border-radius: 10px;border: 1px;border-style: solid;border-color: white;margin-top: 20px">
                <div style="text-align: right; padding-top: 20px;padding-right: 30px">
                    Copyright © by Group 1
                    <br />
                    Project Name : Work to Worker
                    <br />
                    Member in Group : Mr Bùi Hồng Hải , Mr Nguyễn Văn Cường , Mr Nguyễn Nhất Linh , Mr Lưu Thế Thông , Mr Trần Trung Hiếu
                </div>
            </div>
        </f:view>
    </h:body>
</html>

